<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>录入自定义页面</title>

		<!-- 引入 css -->
		<link href="/admin/plugin/wangEditor/style.css" rel="stylesheet">
		<!-- 引入 js -->
		<script src="/admin/plugin/wangEditor/index.js"></script>

		<!--引入 element-ui 的样式，-->
		<link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
		<!-- 必须先引入vue，  后使用element-ui -->
		<script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
		<!-- 引入element 的组件库-->
		<script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

		<script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

		<script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>

		<style>
			.changeLHight .el-form-item__label {
				line-height: 16px !important;
			}

			body {
				padding: 5px 20px;
			}

			.el-collapse-item__content {
				padding-bottom: 0px;
			}

			.el-upload-dragger {
				width: 348px;
			}

			.title {
				margin-bottom: 15px;
				padding-bottom: 10px;
				border-bottom: 1px solid #f0f0f0;
			}

			.title span {
				font-size: 14px;
				padding-bottom: 10px;
				border-bottom: 2px solid #000;
			}

			.demo-form-inline {
				margin-bottom: 20px;
			}
		</style>


	</head>
	<body>

		<div id="app">
			<el-form :inline="true" :model="formInline[item.id]" v-for="(item,index) in fieldList" size="small"
				label-width="125px" :rules="rules[item.id]" ref="ruleForm" class="demo-form-inline">
				<div class="title">
					<span>{{item.group_name}}</span>
				</div>
				<template v-for="(field,fieldIndex) in item.list">
					<el-form-item v-if="field.is_input == '0'" :label="field.show_name+''" :prop="field.col_name"
						:class="field.show_name.length>7?'changeLHight':''">

						<!--输入框-->
						<el-input v-if="field.col_style == 0" @keyup.enter.native="huiche(field)" :name="field.id"
							@input="changeFormSubmit(field.col_name)" :disabled="field.is_disabled"
							v-model="formInline[field.group_id][field.col_name]" :placeholder="field.show_name"
							:style="'width:'+field.input_width"></el-input>

						<!--日期框-->
						<el-date-picker v-if="field.col_style == 1" :disabled="field.is_disabled"
							value-format="yyyy-MM-dd" @input="changeFormSubmit(field.col_name)" :name="field.id"
							v-model="formInline[field.group_id][field.col_name]" :placeholder="field.show_name"
							:style="'width:'+field.input_width" type="date">
						</el-date-picker>


						<!--复选框-->
						<template v-if="field.col_style == '19'">
							<el-checkbox-group v-model="formInline[field.group_id][field.col_name]"
								@change="changeFormSubmit(field.col_name)">
								<el-checkbox v-for="option in field.options"
									:label="option.key">{{option.value}}</el-checkbox>
							</el-checkbox-group>
						</template>

						<!--单选框-->
						<template v-if="field.col_style == '21'">
							<el-radio v-model="formInline[field.group_id][field.col_name]"
								@change="changeFormSubmit(field.col_name)" v-for="option in field.options"
								:label="option.key">{{option.value}}</el-radio>
						</template>

						<!--日期框年月-->
						<template v-if="field.col_style == 15">
							<el-date-picker value-format="yyyyMM" :style="'width:'+field.input_width"
								:disabled="field.is_disabled" :name="field.id"
								v-model="formInline[field.group_id][field.col_name]" :placeholder="field.show_name"
								type="month">
							</el-date-picker>
						</template>

						<!--时分秒日期框-->
						<el-date-picker v-if="field.col_style == 5" :disabled="field.is_disabled"
							value-format="yyyy-MM-dd HH:mm:ss" @input="changeFormSubmit(field.col_name)"
							:name="field.id" v-model="formInline[field.group_id][field.col_name]"
							:placeholder="field.show_name" :style="'width:'+field.input_width" type="datetime">
						</el-date-picker>

						<!--下拉框-->
						<el-select :disabled="field.is_disabled" @input="changeFormSubmit(field.col_name)"
							v-if="field.col_style == 6 || field.col_style == 8" filterable
							:style="'width:'+field.input_width" v-model="formInline[field.group_id][field.col_name]"
							:placeholder="field.show_name">
							<el-option value=""></el-option>
							<el-option v-for="option in field.options" :label="option.value"
								:value="option.key"></el-option>
						</el-select>

						<!--远程搜索下拉框-->
						<el-select :disabled="field.is_disabled"
							:remote-method="(query) => remoteMethod(query,fieldIndex,item.list)" remote
							@change="changeFormSubmit(field.col_name)" v-if="field.col_style == 16" filterable
							:style="'width:'+field.input_width" v-model="formInline[field.group_id][field.col_name]"
							:placeholder="field.show_name">
							<el-option value=""></el-option>
							<el-option v-for="option in field.options" :label="option.value"
								:value="option.key"></el-option>
						</el-select>

						<!--下拉框多选-->
						<el-select :disabled="field.is_disabled" multiple @focus="changeFormSubmit(field.col_name)"
							v-if="field.col_style == 12 || field.col_style == 13" filterable
							:style="'width:'+field.input_width" v-model="formInline[field.group_id][field.col_name]"
							:placeholder="field.show_name">
							<!--<el-option value=""></el-option>-->
							<el-option v-for="option in field.options" :label="option.value"
								:value="option.key"></el-option>
						</el-select>


						<!--远程搜索下拉框多选-->
						<el-select :disabled="field.is_disabled" multiple
							:remote-method="(query) => remoteMethod(query,fieldIndex,item.list)" remote
							@change="changeFormSubmit(field.col_name)" v-if="field.col_style == 17" filterable
							:style="'width:'+field.input_width" v-model="formInline[field.group_id][field.col_name]"
							:placeholder="field.show_name">
							<!--<el-option value=""></el-option>-->
							<el-option v-for="option in field.options" :label="option.value"
								:value="option.key"></el-option>
						</el-select>

						<!-- 编辑器 DOM -->
						<div v-if="field.col_style == 3" :style="'height:300px;width:'+field.input_width">
							<div :id="'toolbar-container-'+field.id" :style="'width:'+field.input_width"></div>
							<div :id="'editor-container-'+field.id" :style="'height:300px;width:'+field.input_width">
							</div>
						</div>

						<template v-if="field.col_style == 22">
							<el-upload class="upload-demo" drag
								:action="wwwurl+'/admin/api/UploadController/elementUiUploadDopostFileUpload'"
								:data="{field:field.col_name,groupid:item.id}" :headers="headers"
								:on-success="uploadSuccess"
								:on-remove="(file, fileList) => {handleRemove(file, fileList, field.col_name,field.group_id)}"
								multiple>
								<i class="el-icon-upload"></i>
								<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
							</el-upload>
						</template>


						<template v-if="field.col_style == 4">
							<el-upload :action="wwwurl+'/admin/api/UploadController/elementUiUploadDopostFileUpload'"
								list-type="picture-card" :on-preview="handlePictureCardPreview" multiple
								:data="{field:field.col_name,groupid:item.id}" :headers="headers"
								:file-list="uploadListShow[field.col_name]" :on-success="uploadSuccess"
								:on-remove="(file, fileList) => {handleRemove(file, fileList, field.col_name,field.group_id)}">
								<i class="el-icon-plus"></i>
							</el-upload>
							<el-dialog :visible.sync="dialogVisible">
								<img width="100%" :src="dialogImageUrl" alt="">
							</el-dialog>
						</template>

						<el-input type="textarea" v-if="field.col_style == 7" :style="'width:'+field.input_width"
							:disabled="field.is_disabled" @input="changeFormSubmit(field.col_name)"
							@keyup.enter.native="huiche(field.nextInputId)" :name="field.id"
							v-model="formInline[field.group_id][field.col_name]"
							:placeholder="field.show_name"></el-input>

						<template v-if="field.col_style == 9">
							<el-radio :disabled="field.is_disabled" :style="'width:'+field.input_width"
								v-model="formInline[field.group_id][field.col_name]" :label="option.key"
								v-for="option in field.options">{{option.value}}</el-radio>
						</template>

						<el-switch v-if="field.col_style == 10" :disabled="field.is_disabled" active-value="true"
							inactive-value="false" v-model="formInline[field.group_id][field.col_name]">
						</el-switch>

						<el-cascader v-if="field.col_style == 11" :ref="field.col_name" clearable filterable
							:style="'width:'+field.input_width" v-model="formInline[field.group_id][field.col_name]"
							:props="cascaderProps[field.col_name]"></el-cascader>

						<!--输入列表组件-->
						<template v-if="field.col_style == 14">
							<iframe :name="field.col_name" :group_id="field.group_id" fr="gridList"
								:src="field.list_url+'&tableHeight='+field.tableHeight+'&tableId='+field.data_zygl_id+'&group_id='+field.group_id+'&col_name='+field.col_name"
								frameborder="0"
								:style="'width:'+gridListWidth+'px;height:'+(parseInt(field.tableHeight)+50)+'px'"></iframe>
						</template>


						<!--树形选择框-->
						<template v-if="field.col_style == 23">
							<el-input :name="field.id" style="display: none;" :disabled="true"
								v-model="formInline[field.group_id][field.col_name]" :placeholder="field.show_name"
								:style="'width:'+field.input_width"></el-input>
							<el-input :disabled="true" v-model="formInlineShow[field.col_name]"
								:placeholder="field.show_name" :style="'width:'+field.input_width"></el-input>
							<el-button @click="open_el_tree(field)">选择</el-button>
						</template>

					</el-form-item>

					<div v-if="field.is_inline == '1'" style="display: block;"></div>

				</template>
			</el-form>


			<!--<el-form-item>
            <el-button type="primary" @click="verification">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>-->



		</div>

		<script>
			var E = window.wangEditor; // 全局变量
		</script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					fieldList: [],
					headers: {
						token: localStorage.getItem("token")
					},
					uploadListShow: {},

					dialogImageUrl: '',
					dialogVisible: false,
					formInline: {},
					formInlineShow: {},
					rules: {},
					cascaderProps: {}, //三级联动动态加载
					parmsData: {},
					tableId: "",
					setFormData: {},
					gridListWidth: $(document.body).width() - 30,
					other: top.data.other,
					huicheInput: {},
				},
				created() {
					this.parmsData = getParams();
					if (this.parmsData.tableId != undefined) {
						this.tableId = this.parmsData.tableId;
					} else {
						this.tableId = top.data.tableId;
					}
					try {
						copy(this.parmsData, top.data.other);
					} catch (e) {}
					this.pageInit();
				},
				methods: {
					//打开树形选择框
					open_el_tree(field) {
						if (field.data_zygl_id == "") {
							top.alert("未定义选择数据表");
							return;
						}
						let btn = {
							btn: ['确定', '取消'],
							yes: async function(index, layero) {
								//按钮【按钮一】的回调
								let win = getTopIframe(layero);
								let dataNode = win.getData();
								vm.formInline[field.group_id][field.col_name] = dataNode.id;
								vm.formInlineShow[field.col_name] = dataNode.title;
								top.close(index);
							},
							btn2: function(index, layero) {
								//按钮【按钮二】的回调
								//return false 开启该代码可禁止点击该按钮关闭
							}
						};

						top.f_layer_open_get("/admin/html/inputCustom/treeSelect.html?tableId=" + field.data_zygl_id,
							"40%", "80%",
							function() {

							}, btn, field.show_name + "-选择", vm.formInline);
					},
					//远程搜索下拉框
					async remoteMethod(query, index, itemList) {
						let field = itemList[index];
						const res = await postBody(
							"/admin/api/DataManagementController/DropdownBoxRemoteSearchEvent2", {
								fieldId: field.col_id,
								key: query
							});
						if (res.code == 0) {
							top.alert(res.msg);
							return;
						}
						Vue.set(field, "options", res.data)

					},
					handleChange(field) { //三级联动下拉框改变事件 只保存最后一级 暂时废弃
						let values = vm.formInline[field.group_id][field.col_name];
						let vstr = values[values.length - 1];
						vm.formInline[field.group_id][field.col_name] = vstr;
						// console.log(vm.formInline[field.group_id][field.col_name])
						return true;
					},
					enterNext() {
						document.onkeydown = e => {
							if (e.keyCode === 13) {
								console.log(vm.huicheInput);
								//回车后执行搜索方法
								this.huiche(vm.huicheInput.nextInputId);
							}
						}
					},

					//把当前新增的数据ID赋值到录入界面中
					async setUUIDInput(uuid) {
						for (let key in vm.formInline) {
							let data = vm.formInline[key];
							data.id = uuid;
						}
					},

					//输入框回车事件
					huiche(field) {
						if (field != undefined) {
							let refid = field.nextInputId;
							if (refid != undefined) {
								vm.huicheInput = field;
								console.log("refid", refid)
								$("[name='" + refid + "']")[0].focus();
							}
						}
					},

					pageInit() {
						postBody("/admin/api/DataManagementController/enterCustomFieldQuery", {
							tableId: this.tableId,
							other: top.data.other
						}, async function(res) {
							vm.fieldList = res.data.fieldList;


							//动态加载三级联动
							for (let a = 0; a < vm.fieldList.length; a++) {
								let group = vm.fieldList[a];
								let colList = group["list"];
								for (let i = 0; i < colList.length; i++) {
									let col_name = colList[i].col_name;
									if (colList[i].col_style == "11") {
										vm.cascaderProps[col_name] = { //三级联动动态加载
											lazy: true,
											checkStrictly: true,
											async lazyLoad(node, resolve) {
												console.log("node:", node);
												let pid = "0000";
												if (node.level != '0') {
													pid = node.data.value;
												}
												const res = await listAdmin(colList[i].data_zygl_id,
													"id", {
														pid: pid
													});
												let nodes = [];
												let nodesList = res.data;
												for (let c = 0; c < nodesList.length; c++) {
													nodes.push({
														value: nodesList[c][colList[i]
															.select_v
														],
														label: nodesList[c][colList[i]
															.select_text
														],
														level: 1
													});
												}
												resolve(nodes);
											}
										}
									}
								}
							}


							let ic = Object.keys(vm.setFormData).length;
							if (Object.keys(vm.setFormData).length == 0) {
								vm.formInline = res.data.mapformline;
							} else {
								vm.formInline = vm.setFormData;
							}
							vm.rules = res.data.roles;

							//如果当前页面输入数据ID参数，并没有传入回显数据时，则直接查询数据并赋值
							if (vm.parmsData.id != undefined && vm.parmsData.id != "") {
								let mapres = await queryDataForId(vm.tableId, vm.parmsData.id, top.data
									.other);
								if (mapres.code == 1) {
									vm.formInline = mapres.data;
								}
							}

							//开始校验表单
							setTimeout(function() {
								let a = 0;
								for (let zygl in vm.formInline) {
									let map = vm.formInline[zygl];
									try {
										vm.submitForm("ruleForm", a);
										a++;
									} catch (e) {}
								}
							}, 500);

							vm.$nextTick(() => {
								//三级联动下拉框回显
								for (let a = 0; a < vm.fieldList.length; a++) {
									let group = vm.fieldList[a];
									let colList = group["list"];
									for (let i = 0; i < colList.length; i++) {
										let col_name = colList[i].col_name;
										if (colList[i].col_style == "11") {
											vm.$refs[col_name][0].inputValue = colList[i].options;
											vm.$refs[col_name][0].presentText = colList[i].options;
										}
									}
								}


								for (let a = 0; a < vm.fieldList.length; a++) {
									if (ic >= 0) { //对当前页面图片字段进行渲染
										let columnlist = vm.fieldList[a].list;
										for (let i = 0; i < columnlist.length; i++) {
											if (columnlist[i].col_style == "4") {
												let groupid = vm.fieldList[a].id;
												let src = vm.formInline[groupid][columnlist[i]
													.col_name
												];

												vm.fileListTransi(src, columnlist[i].col_name);
											}
										}
									}

									// 创建富文本编辑器
									let columnlist = vm.fieldList[a].list;
									for (let i = 0; i < columnlist.length; i++) {
										if (columnlist[i].col_style == "3") {
											// 创建编辑器1
											let editor1 = E.createEditor({
												selector: '#editor-container-' + columnlist[
													i].id,
												html: vm.formInline[vm.fieldList[a].id][
													columnlist[i].col_name
												],
												mode: 'default',
												config: {
													onChange(editor) { //文本编辑器的改变事件
														const html = editor.getHtml();
														let groupid = vm.fieldList[a].id;
														vm.formInline[groupid][columnlist[i]
															.col_name
														] = html;
													},
													MENU_CONF: {
														uploadImage: {
															"server": '/admin/api/UploadController/systemDopostFileUpload',
															"headers": {
																token: localStorage.getItem(
																	"token")
															},
															fieldName: "file",
															// 自定义插入图片
															customInsert(res, insertFn) {
																// res 即服务端的返回结果
																console.log(res);
																// 从 res 中找到 url alt href ，然后插图图片
																insertFn(res.data.url, "",
																	"");
															},
														}
													}

												}
											})

											// 创建工具栏1
											E.createToolbar({
												editor: editor1,
												selector: '#toolbar-container-' + columnlist[
													i].id,
												mode: 'default'
											})


										}
									}

								}
							})

						});
					},
					uploadSuccess(response, file, fileList) {
						let groupid = response.data.groupid;
						let field = response.data.field;
						if (vm.formInline[groupid][field] == undefined || vm.formInline[groupid][field] == "") {
							vm.formInline[groupid][field] = response.data.src;
							// Vue.set(vm.formInline,response.data.field,response.data.src);
						} else {
							vm.formInline[groupid][field] = vm.formInline[groupid][field] + "," + response.data.src;
							// Vue.set(vm.formInline,response.data.field,vm.formInline[response.data.field]+","+response.data.src)
						}
					},
					fileListTransi(src, field) {
						if (src == null || src == undefined || src == "") {
							return;
						}
						let urls = src.split(",");
						let fileList = [];
						for (let a = 0; a < urls.length; a++) {
							fileList.push({
								name: "",
								url: urls[a]
							});
						}
						Vue.set(vm.uploadListShow, field, fileList);
					},

					handlePictureCardPreview(file) {
						this.dialogImageUrl = file.url;
						this.dialogVisible = true;
					},
					handleRemove(file, fileList, field, zygl_id) {
						let urls = "";
						for (let a = 0; a < fileList.length; a++) {
							let url = fileList[a].url;
							if (url.indexOf("blob:") == -1) {
								if (urls == "") {
									urls = url;
								} else {
									urls = urls + "," + url;
								}
							}

						}
						vm.formInline[zygl_id][field] = urls;
					},
					submitForm(formName, index) {
						try {
							vm.$refs[formName][index].validate((valid) => {
								if (valid) {
									return true;
								} else {
									console.log('error submit!!');
									return false;
								}
							});
						} catch (e) {}

					},
					resetForm(formName) {
						this.$refs[formName].resetFields();
					},
					changeFormSubmit(v) {
						console.log("vvv", v);
						top.data.changeColumn = v;
					},
					changePost: throttle(async function() {
						const res = await postBody(
							"/admin/api/DataManagementController/inputBoxChangeEvent", {
								tableId: this.tableId,
								mapdata: {
									"oldValue": top.data.oldValue,
									"newValue": top.data.newValue
								},
								other: {
									fieldList: vm.fieldList,
									rules: vm.rules,
									other: top.data.other,
									changeColumn: top.data.changeColumn
								}
							});
						if (res.code == 1) {
							vm.fieldList = res.data.other.fieldList;
							vm.formInline = res.data.mapdata.newValue;
							vm.rules = res.data.other.rules;
							top.data.changeColumn = "";
							//循环列表编辑的数据
							/*let iframes = $("[fr=gridList]");
							for(let a=0;a<iframes.length;a++){
							    let src = $(iframes[a]).attr("src");
							    $(iframes[a]).attr("src",src);
							}*/


							//循环列表重新加载数据
							for (let a = 0; a < vm.fieldList.length; a++) {
								let listcol = vm.fieldList[a].list;
								for (let i = 0; i < listcol.length; i++) {
									if (listcol[i].col_style == "14") {
										let src = $("[name=" + listcol[i].col_name + "]").attr("src");
										$("[name=" + listcol[i].col_name + "]").attr("src", src);
									}
								}
							}
						} else if ("未定义录入事件接口" != res.msg) {
							top.error(res.msg);
						}
					}, 800)
				},
				computed: {
					formInlineFun() {
						return JSON.parse(JSON.stringify(this.formInline));
					},
				},
				watch: {
					formInlineFun: {
						async handler(newValue, oldValue) {
							let isdif = diff(newValue, oldValue);
							if (isdif) {
								return;
							}
							if (Object.keys(oldValue).length == 0) {
								return;
							}
							top.data.oldValue = oldValue;
							top.data.newValue = newValue;
							this.changePost();
							return;
						},
						deep: true
					}
				}
			})


			async function queryfordata() {
				let mapres = await queryDataForId(vm.tableId, vm.parmsData.id, top.data.other);
				if (mapres.code == 1) {
					vm.formInline = mapres.data;
				}
			}


			//验证必填项
			function verification() {
				let a = 0;
				for (let zygl in vm.formInline) {
					let map = vm.formInline[zygl];
					try {
						vm.submitForm("ruleForm", a);
						a++;
					} catch (e) {}
				}
				for (let zygl in vm.formInline) {
					let map = vm.formInline[zygl];
					for (let key in map) {
						try {
							let value = map[key];
							if (vm.rules[zygl][key] != undefined && value == "") {
								top.error("红*号必输项不能为空!" + key + " " + value);
								return false;
							}
						} catch (e) {}
					}

				}
				return true;
			}

			function getData() {
				return vm.formInline;
			}

			function getData_old() {
				let dataObj = {};
				vm.formInline["data"] = {};
				console.log("11", vm.formInline);
				for (let key in vm.formInline) {
					let data = vm.formInline[key];
					copy(data, dataObj);
				}


				//循环列表编辑的数据
				let iframes = $("[fr=gridList]");
				for (let a = 0; a < iframes.length; a++) {
					let name = $(iframes[a]).attr("name");
					//把当前页面中列表中的tableData数据暂时先扔掉
					// dataObj[name] = $(iframes[a])[0].contentWindow.vm.tableData;
					console.log(name);
					console.log(dataObj[name]);
				}

				vm.formInline["data"] = {};
				return vm.formInline;
			}


			function setData(data) {
				if (Object.keys(data).length > 0) {
					vm.setFormData = data;
					vm.formInline = data;
				}

			}
		</script>


	</body>
</html>